<style>
.tiles .cell {flex: none;}
</style>

<div class="section">
  <div class="heading">
    <div class="title"><strong>基本用法</strong></div>
  </div>
  <div class="box">
    <span class="label">标签</span>
    <span class="label gray"><i class="icon icon-star"></i></span>
    <span class="label text-primary">标签</span>
    <span class="label primary">标签</span>
    <span class="label disabled" disabled>已禁用</span>
  </div>
  <pre>
<code>&lt;a href=&quot;&quot; class=&quot;label&quot;&gt;标签&lt;/a&gt;
&lt;span class=&quot;label gray&quot;&gt;&lt;i class=&quot;icon icon-star&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;span class=&quot;label text-primary&quot;&gt;标签&lt;/span&gt;
&lt;span class=&quot;label primary&quot;&gt;标签&lt;/span&gt;
&lt;span class=&quot;label disabled&quot; disabled&gt;&#x5df2;&#x7981;&#x7528;&lt;/span&gt;</code>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>大小</strong></div>
  </div>
  <div class="box">
    <p>使用 <code>.label-sm</code> 获得一个较小的标签。</p>
    <span class="label label-sm">标签</span>
    <span class="label label-sm gray"><i class="icon icon-star"></i></span>
    <span class="label label-sm text-primary">标签</span>
    <span class="label label-sm primary">标签</span>
    <span class="label label-sm disabled" disabled>已禁用</span>
  </div>
  <pre>
<code>&lt;a href=&quot;&quot; class=&quot;label label-sm&quot;&gt;标签&lt;/a&gt;
&lt;span class=&quot;label label-sm gray&quot;&gt;&lt;i class=&quot;icon icon-star&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;span class=&quot;label label-sm text-primary&quot;&gt;标签&lt;/span&gt;
&lt;span class=&quot;label label-sm primary&quot;&gt;标签&lt;/span&gt;
&lt;span class=&quot;label label-sm disabled&quot; disabled&gt;&#x5df2;&#x7981;&#x7528;&lt;/span&gt;</code>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>外观选项</strong></div>
  </div>
  <div class="box article">
    <p>外观选项用法参考 <strong class="text-link">基础 > 外观</strong> 章节。以下列举标签的常见用法。</p>
    <div class="row tiles">
      <div class="cell"><div class="label primary">.label.primary</div></div>
      <div class="cell"><div class="label success">.label.success</div></div>
      <div class="cell"><div class="label danger">.label.danger</div></div>
      <div class="cell"><div class="label warning">.label.warning</div></div>
      <div class="cell"><div class="label info">.label.info</div></div>
      <div class="cell"><div class="label special">.label.special</div></div>
      <div class="cell"><div class="label important">.label.important</div></div>
      <div class="cell"><div class="label dark">.label.dark</div></div>
      <div class="cell"><div class="label inverse">.label.inverse</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="label primary-pale">.label.primary-pale</div></div>
      <div class="cell"><div class="label success-pale">.label.success-pale</div></div>
      <div class="cell"><div class="label danger-pale">.label.danger-pale</div></div>
      <div class="cell"><div class="label warning-pale">.label.warning-pale</div></div>
      <div class="cell"><div class="label info-pale">.label.info-pale</div></div>
      <div class="cell"><div class="label special-pale">.label.special-pale</div></div>
      <div class="cell"><div class="label important-pale">.label.important-pale</div></div>
      <div class="cell"><div class="label gray">.label.gray</div></div>
      <div class="cell"><div class="label white">.label.white</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="label primary-pale text-tint">.label.primary-pale.text-tint</div></div>
      <div class="cell"><div class="label success-pale text-tint">.label.success-pale.text-tint</div></div>
      <div class="cell"><div class="label danger-pale text-tint">.label.danger-pale.text-tint</div></div>
      <div class="cell"><div class="label warning-pale text-tint">.label.warning-pale.text-tint</div></div>
      <div class="cell"><div class="label info-pale text-tint">.label.info-pale.text-tint</div></div>
      <div class="cell"><div class="label special-pale text-tint">.label.special-pale.text-tint</div></div>
      <div class="cell"><div class="label important-pale text-tint">.label.important-pale.text-tint</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="label primary outline">.label.primary.outline</div></div>
      <div class="cell"><div class="label success outline">.label.success.outline</div></div>
      <div class="cell"><div class="label danger outline">.label.danger.outline</div></div>
      <div class="cell"><div class="label warning outline">.label.warning.outline</div></div>
      <div class="cell"><div class="label info outline">.label.info.outline</div></div>
      <div class="cell"><div class="label special outline">.label.special.outline</div></div>
      <div class="cell"><div class="label important outline">.label.important.outline</div></div>
      <div class="cell"><div class="label dark outline">.label.dark.outline</div></div>
      <div class="cell"><div class="label inverse outline">.label.inverse.outline</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="label primary rounded">.label.primary.rounded</div></div>
      <div class="cell"><div class="label success outline rounded">.label.success.outline.rounded</div></div>
      <div class="cell"><div class="label danger-pale rounded">.label.danger-pale.rounded</div></div>
      <div class="cell"><div class="label warning-pale text-tint rounded">.label.warning-pale.text-tint.rounded</div></div>
      <div class="cell"><div class="label dark rounded">.label.dark.rounded</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="label primary circle">.label.primary.circle</div></div>
      <div class="cell"><div class="label success outline circle">.label.success.outline.circle</div></div>
      <div class="cell"><div class="label danger-pale circle">.label.danger-pale.circle</div></div>
      <div class="cell"><div class="label warning-pale text-tint circle">.label.warning-pale.text-tint.circle</div></div>
      <div class="cell"><div class="label dark circle">.label.dark.circle</div></div>
    </div>
  </div>
</div>
